<template>
    <div class="swiper-container detail-swiper">
        <div class="swiper-wrapper">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
// import Swiper from 'swiper'; // 直接引入swiper有问题，默认入口是swiper.cjs.js不兼容
import Swiper from 'swiper/swiper-bundle.min.js';
import 'swiper/swiper-bundle.min.css';

export default {
    props: { perview: { type: String, default: '' }, myclassname: { type: String, default: '' } },
    mounted() {
        const mySwiper = new Swiper('.' + this.myclassname, {
            slidesPerView: this.perview,
            spaceBetween: this.myclassname === 'actorswiper' ? 20 : 10,
            freeMode: true,
            loop: true
        });
        Vue.use(mySwiper); // 解决ES6no-new问题
    }
};
</script>

<style lang="scss" scoped>
.actorswiper {
    margin-left: 10px;
    margin-right: 10px;
    img {
        width: 100%;
        height: 100px;
    }
}
.photoswiper {
    margin-left: 10px;
    margin-right: 10px;
    img {
        width: 100%;
        height: 80px;
    }
}
</style>
